<template>
  <div class="login-wrap">
    <div class="ms-title">后台管理登录</div>
    <div class="ms-login">
      <el-form :model="ruleForm" :rules="rules"  ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {mixin} from "../../static/js/index";
  import {getLoginStatus} from "../api/public/api";

  export default {
    mixins: [mixin],
    data: function () {
      return {
        ruleForm: {
          username: "admin",
          password: "123"
        },
        rules: {
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"}
          ]
        }
      };
    },
    methods: {
      submitForm() {
        let params = {
          "account": this.ruleForm.username,
          "pwd": this.ruleForm.password
        }
        getLoginStatus(params)
          .then((res) => {
            if (res.data.code == 0) {
              localStorage.setItem('userName', this.ruleForm.username);
              localStorage.removeItem('level')
              localStorage.setItem('level', res.data.data.level);
              this.$router.push("/manage");
              this.notify("登录成功", "success");
            } else {
              this.notify(res.data.msg, "error");
            }
          });
      }
    },
    created() {
     let loginWrap = document.querySelector(".login-wrap");
     console.log('loginWrap',loginWrap.style.height);
    },
  }
</script>
<style>
  .login-wrap {
    /*position: relative;*/
    background: url("../../static/images/background.jpg");
    /*background-attachment: fixed;*/
    /*background-position: center;*/
    background-size: cover;
    /*background-color: black;*/
    width: 100%;
    height: 960px;
    /* height: 100%; */
  }

  .ms-title {
    /*position: absolute;*/
    /*top: 50%;*/
    /*width: 100%;*/
    padding-top: 230px;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
  }

  .ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 160px;
    margin-left: -190px;
    margin-top: -150px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 100%;
    height: 36px;
  }

</style>
